<script setup lang="ts">
defineOptions({
  name: "GoodsList"
});
import { reactive, ref } from "vue";
import AddGoods from "./utils/AddGoods.vue";
import GoodsDetails from "./utils/GoodsDetails.vue";
import Plus from "@iconify-icons/ep/circle-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage, ElMessageBox } from "element-plus";

const ruleFormRef = ref();
const addDialogVisible = ref(false);
const detailsVisible = ref(false);
const chooseId = ref("-1");
const checkList = ref([]);

const formInline = reactive({
  no: "",
  name: "",
  money: "",
  status: "",
  date: ""
});

// 查询
const onSubmit = () => {
  console.log("submit!", formInline);
};

// 重置
const onReset = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  console.log("onReset!", formInline);
};

// 导出
const onExport = () => {
  console.log("onExport!", formInline);
};

// 勾选商品
const handleSelectionChange = val => {
  // TODO分页选择的会不会删掉
  checkList.value = val;
  console.log(val);
  // multipleSelection.value = val
};

// 批量上下架
const batch = type => {
  if (!checkList.value.length) {
    ElMessage.error("请先选择商品");
    return;
  }
  ElMessageBox.alert(
    `确定批量${type === "listing" ? "上" : "下"}架吗？`,
    "批量上下架",
    {
      confirmButtonText: "确定",
      callback: action => {
        if (action === "confirm") {
          // TODO请求
          console.log("批量");
        }
      }
    }
  );
};

// 编辑
const editRow = item => {
  chooseId.value = item.ID;
  addDialogVisible.value = true;
};

// 查看详情
const detailsRow = item => {
  chooseId.value = item.ID;
  detailsVisible.value = true;
};

// 关闭弹框
const visibleChange = val => {
  val === "addDialogVisible" && (addDialogVisible.value = false);
  val === "detailsVisible" && (detailsVisible.value = false);
  chooseId.value = "-1";
};

const tableData = [
  {
    no: "1",
    name: "Tom",
    phone: "18524569845",
    ID: "1",
    bankCard: "620015878965412587412",
    isAuth: "1",
    date: "2016-05-02",
    notes: "无"
  },
  {
    no: "2",
    name: "Tom",
    phone: "18524569845",
    ID: "2",
    bankCard: "620015878965412587412",
    isAuth: "1",
    date: "2016-05-02",
    notes: "无"
  }
];
</script>

<template>
  <div class="main_content">
    <p class="page_title">商品管理</p>

    <el-form ref="ruleFormRef" :inline="true" :model="formInline" class="form">
      <el-form-item label="商品编码" prop="no">
        <el-input v-model="formInline.no" placeholder="商品编码" clearable />
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="formInline.name" placeholder="商品名称" clearable />
      </el-form-item>
      <el-form-item label="面值" prop="money">
        <el-input v-model="formInline.money" placeholder="面值" clearable />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formInline.status" placeholder="状态" clearable>
          <el-option label="上架" value="1" />
          <el-option label="下架" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期" prop="date">
        <el-date-picker
          v-model="formInline.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="卡种" prop="status">
        <el-select v-model="formInline.status" placeholder="状态" clearable>
          <el-option label="沃尔玛" value="1" />
          <el-option label="京东e卡" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="operate_btn">
      <el-button
        type="primary"
        :icon="useRenderIcon(Plus)"
        @click="addDialogVisible = true"
        >新增商品</el-button
      >
      <el-button type="primary" @click="batch('listing')">批量上架</el-button>
      <el-button type="primary" @click="batch('delisting')">批量下架</el-button>
    </div>

    <el-table
      :data="tableData"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="no" label="商品编码" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="money" label="面值（元）" />
      <el-table-column prop="status" label="商品状态" />
      <el-table-column prop="bankCard" label="图片" />
      <el-table-column prop="date" label="创建日期" />
      <el-table-column prop="notes" label="备注" />
      <el-table-column prop="notes" label="操作" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="detailsRow(scope.row)"
          >
            商品详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddGoods
      v-if="addDialogVisible"
      :add-visible="addDialogVisible"
      :chooseId="chooseId"
      @visibleChange="visibleChange('addDialogVisible')"
    />
    <GoodsDetails
      v-if="detailsVisible"
      :details-visible="detailsVisible"
      :chooseId="chooseId"
      @visibleChange="visibleChange('detailsVisible')"
    />
  </div>
</template>
